<template>
	<view class="tabbar">
		<view class="tabbar_box l-f l-row-ad">
			<view 
			@click.stop="onTabbar(index)"
			class="tabbar_box_item l-f l-row-c l-column"
			v-for="(item,index) in list"
			:key="index">
				<image 
				class="tabbar_box_item_icon"
				:src="current === index ? item.icon_active : item.icon"></image>
				<text class="tabbar_box_item_label" :class="current === index ? 'active' : ''">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabbar",
		props: {
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				list: [
					{
						icon: '/static/images/tabbar/home.png',
						icon_active: '/static/images/tabbar/home_active.png',
						name: '录制',
						path: '/pages/index/index'
					},
					{
						icon: '/static/images/tabbar/model.png',
						icon_active: '/static/images/tabbar/model_active.png',
						name: '模型更新',
						path: '/pages/model/model'
					}
				]
			};
		},
		methods: {
			onTabbar(index) {
				// this.$emit('change',index)
				uni.switchTab({
					url: this.list[index].path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabbar {
	padding: 0 28rpx;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 30rpx;
	z-index: 98;
	&_box {
		height: 184rpx;
		background: url("@/static/images/tabbar_bg.png") no-repeat;
		background-size: 100%;
		&_item {
			&_icon {
				width: 104rpx;
				height: 104rpx;
			}
			&_label {
				margin-top: 12rpx;
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
}
.active {
	color: #ffffff;
}
</style>